CSS 自适应字体两边增加横线

具体调用伪代码：

<div class="line-container">
  <span>CommandNotFound 评分详情</span>
</div>

CSS 代码：

.line-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-container::before,
.line-container::after {
  content: "";
  flex: 1; /* 横线占据剩余空间 */
  border-bottom: 1px solid #ccc; /* 横线样式，可以调整颜色和宽度 */
  margin: 0 10px; /* 横线与文字的间距 */
}

.line-container span {
  white-space: nowrap; /* 防止文字换行 */
  font-size: 16px; /* 文本大小，可调整 */
  color: #333; /* 文本颜色 */
}

CSS 选择器扩展阅读：

• CSS 自适应字体两边增加横线
• CSS 选择器，选择 DIV 里的内容而不选择某个标签
• CSS 控制长文本自动折行
• CSS、JS 判断手机横竖屏
• CSS 炫酷的水平分隔线
• CSS 盒模型

CommandNotFound ⚡️ 坑否 - 其他频道扩展阅读：

• ld 命令
• iperf、iperf3 命令
• getfacl 命令
• rsstail 命令
• sum 命令
• ul 命令
• renice 命令
• sort 命令
• cowthink 命令
• uprecords 命令

发表评论